<template>
  <div>
    <p>我有{{money}}块钱</p>
    <!-- 需求 用户每次点击按钮 加十块钱 -->
    <!-- 绑定点击事件 修改money 就可以实现 -->
    <!-- 如果只执行一行代码 可以直接写在后面 -->
    <!-- 数据驱动视图 数据变化视图会自动更新 -->
    <button v-on:click="money +=10">点我加十块</button>
    <button v-on:click="add">点我加一块钱</button>
    <!-- 事件传参 -->
    <!--  -->
    <button v-on:click="addNum(20)">点我加二十块</button>
    <button v-on:click="addNum(50)">点我加五十块</button>
    <!-- v-on:可以简写@ -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      money:100
    }
  },
  // 和data 平级的地方写methods用于定义函数
  methods: {
    // methodd 是一个对象 可以在里面定义很多函数
  add(){
      console.log('我被点了');
      console.log(this);
    }
  }

}
</script>

<style>

</style>